<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
    .box1{
        width: 400px;
        height: 400px;
        background: red;
    }
    .box2{
        width: 150px;
        height: 150px;
        background: orange;
    }
    </style>
</head>
<body>
    <div id="app">
        <div class="box1" @click="show1">
            <div class="box2" @click="show2">
                <p @click.stop="show3">一段文本</p>
            </div>
        </div>
    </div>

    <script>
        var vm1 = new Vue({
            el:"#app",
            data:{},
            methods:{
                show1(){
                    console.log("box1");
                },
                show2(){
                    console.log("box2");
                },
                show3(){
                    console.log("点击了p标签");
                }
            }
        })
    </script>
</body>
</html>
